<template>
  <view class="container">
    <view class="form-box">
      <uni-forms
        ref="valiForm"
        :modelValue="valiFormData"
        :border="false"
        label-position="top"
        labelWidth="200px"
        :rules="rules"
      >
        <uni-forms-item label="删除原因" name="reason">
          <uni-easyinput
            type="textarea"
            v-model.trim="valiFormData.reason"
            placeholder="请输入删除原因"
            maxlength="800"
            :inputBorder="false"
            autoHeight
          />
        </uni-forms-item>
      </uni-forms>
    </view>
    <view class="button-bar">
      <view class="button-bar-btn" @tap="formSubmit"> 提交申请 </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { deleteStoryApi } from '@/api/store'
import { deleteActivityApi } from '@/api/activity'

const valiForm = ref(null)
let pageType = ''
let id = ''
const valiFormData = reactive({
  reason: ''
})

onLoad(options => {
  console.log('options', options)
  pageType = options.pageType
  id = options.id
})

// 校验规则
const rules = reactive({
  reason: {
    rules: [
      {
        required: true,
        errorMessage: '请输入删除原因'
      }
    ]
  }
})

const formSubmit = () => {
  valiForm.value
    .validate()
    .then(async res => {
      // console.log('success', res);
      // uni.showToast({
      // 	title: `校验通过`
      // })
      uni.showLoading({
        title: '正在提交...',
        mask: true
      })
      if (pageType === 'store') {
        await deleteStoryApi({
          ...valiFormData,
          applyId: id
        })
        uni.hideLoading()
        uni.showModal({
          title: '提示',
          showCancel: false,
          content: '提交成功，请等待后台审核通过',
          success: function (res) {
            if (res.confirm) {
              uni.navigateBack()
            }
          }
        })
      } else if (pageType === 'activity') {
        await deleteActivityApi({
          ...valiFormData,
          applyId: id
        })
        uni.hideLoading()
        uni.showModal({
          title: '提示',
          showCancel: false,
          content: '提交成功，请等待后台审核通过',
          success: function (res) {
            if (res.confirm) {
              uni.navigateBack()
            }
          }
        })
      }
    })
    .catch(err => {
      console.log('err', err)
    })
}
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  background-color: #ebebeb;
  font-family: PingFangSC-Regular, sans-serif;
  position: relative;
}

.form-box {
  padding: 40rpx;
  box-sizing: border-box;
}

.button-bar {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center;
  bottom: calc(50rpx + env(safe-area-inset-bottom));

  .button-bar-btn {
    font-family: PingFangSC-Regular, sans-serif;
    background-color: #bb9f5e;
    color: #fff;
    font-size: 28rpx;
    padding: 16rpx 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    border-radius: 12rpx;
    letter-spacing: 2rpx;
    background-image: url('https://ucp-tcg.com:18001/mc/app/static/tabbg-l.png');
    background-repeat: no-repeat;
    background-size: contain;
  }
}

::v-deep .uni-stat__select .uni-stat-box {
  background-color: #e3e3e3;
  // border-color: #189BFA;
  // border-radius: 16rpx;
  // text-align: center;

  // .uni-select__input-text {
  // 	color: #189BFA;
  // }

  // .uni-icons.uniui-bottom {
  // 	color: #189BFA !important;
  // }
}

::v-deep .uni-forms-item__content .uni-easyinput__content {
  background-color: #e3e3e3 !important;
}

::v-deep .uni-forms-item__error {
  font-size: 28rpx;
}

::v-deep .uni-easyinput__content-textarea {
  padding-left: 20rpx;
}
</style>
